<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>更多书籍</title>
		<link rel="stylesheet" href="../../style/more/bootstrap.min.css">
		<link rel="stylesheet" href="../../style/more/indexStyle.css">
		<link rel="stylesheet" href="../../style/more/more.css">
		<link rel="shortcut icon" href="./../../favicon.ico">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css">
		<!-- 引入组件库 -->
	</head>

	<body>
		<div id="app">
			<nav class="public-header">
				<a href="../../index.html">网站首页</a>
				<a href="">我的订单</a>
				<a href="../../pages/cart/shoppingCart.html">我的购物车</a>
				<a href="">讨论区</a>
			</nav>
			<div class="container">
				<!-- 搜索框区域 -->
				<div class="row ssq">
					<div>
						<div class="col-md-3" style="font-size: 38px;text-align: center;">
							<span style="font-family:'华文行楷'">{{type_name}}<span
									style="font-size:18px">共{{total}}条记录</span></span>
						</div>
						<div class="col-md-5 col-md-offset-2">
							<div class="input-group input-group-lg">
								<input type="text" class="form-control" placeholder="生命唯愿爱与自由"
									aria-describedby="basic-addon2" v-model="searchContent"
									@keyup.enter="searchBook(1)">
								<span class="input-group-btn" id="basic-addon2">
									<button class="btn btn-default" id="query" @click="searchBook(1)">搜索</button>
								</span>
							</div>
						</div>
					</div>
					<!-- /.col-lg-6 -->
				</div>

				<div class="container">
					<ul class="media-list">
						<li class="media" v-for="(item,index) in books">
							<div class="media-left">
								<a href="#" class="media-left-a">
									<img class="media-object more_media_img" :src=`http:${item.imageName}` alt="...">
								</a>
							</div>


							<div class="media-body" style="overflow:visible">
								<h4 class="media-heading"><span class="name">{{item.name}}</span></h4>
								<span class="description">{{item.description}}</span>

								<h4 class="address"><span class="author">{{item.author}}</span>&nbsp;&nbsp; <span
										style="color:gray">/</span><span style="font-size:16px"
										class="publisher">&nbsp;&nbsp;{{item.publisher}}</span>
								</h4>


								<p id='jg' v-if="flag">
									<span><small>￥</small>{{(item.discountRate*item.price).toFixed(2)}}</span>
									<span style="text-decoration: line-through"><small>￥</small>{{item.price}}</span>
								</p>

								<p id="jg" v-else>￥{{item.price}}</p>
								
								<button :class="item.show?'btn class2':'btn gw-btn'" @click="saveCart(item.id)" v-if="is_login">
									<i class="fa fa-cart-plus"></i>
									{{item.show?'已在购物车':'加入购物车'}}
								</button>
								<button class="btn class2" @click="location.href='../login/login.html'" v-else>
									<i class="fa fa-cart-plus"></i>
									请登录后加入
								</button>
								<!--
								<button class="btn gw-btn" @click="saveCart(item.id)">
									<i class="fa fa-cart-plus"></i>&nbsp;&nbsp;加入购物车
								</button>
								-->
								<!-- <button  @click="addCart(index)"   v-show="show" class="btn class2" ><i class="fa fa-cart-plus"></i>&nbsp;&nbsp;该书已在购物车中</button> -->

							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="extra">
				<div class="wrapper">
					<!-- 版权信息 -->
					<div class="copyright">
						<p>
							<a href="javascript:;">关于我们</a>
							<a href="javascript:;">帮助中心</a>
							<a href="javascript:;">售后服务</a>
							<a href="javascript:;">配送与验收</a>
							<a href="javascript:;">商务合作</a>
							<a href="javascript:;">搜索推荐</a>
							<a href="javascript:;">友情链接</a>
						</p>
						<p>CopyRight &copy; 小兔鲜儿</p>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

<script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
<script src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/axios.min.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/layer-master/dist/layer.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				books: [],
				type_name: '',
				total: 0,
				search_book_name: '',
				flag: false,
				searchContent: '',
				is_login: false
			}
		},
		methods: {
			// 新鲜好书
			loadBooksByFreshData(page) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/fresh_all/' + page,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.books = resp.data.data.records
					this.total = resp.data.data.total
				})
			},
			// 低价专区
			loadBooksByLowerData(page) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/lower_all/' + page,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.books = resp.data.data.records
					this.total = resp.data.data.total
				})
			},
			// 分类图书
			loadBooksByCategoryData(page, category_id) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/category/' + category_id + '/' + page,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.books = resp.data.data.records
					this.total = resp.data.data.total
					console.log(this.books)
				})
			},
			// 搜索图书
			searchBookByName(page) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/search/' + this.search_book_name + '/' + page,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.books = resp.data.data.records
					this.total = resp.data.data.total
				})
			},
			// 搜索框进行搜索
			searchBook(page) {
				let type = sessionStorage.getItem('type')
				if (parseInt(type) === 1) {
					axios({
						method: 'get',
						url: 'http://localhost:9000/book/find_bookname_fresh/' + this.searchContent + '/' +
							page,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.books = resp.data.data.records
						this.total = resp.data.data.total
					})
				} else if (parseInt(type) === 2) {
					axios({
						method: 'get',
						url: 'http://localhost:9000/book/find_bookname_category/' + this.searchContent +
							'/' + sessionStorage.getItem('category_id') + '/' + page,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.books = resp.data.data.records
						this.total = resp.data.data.total
					})
				} else if (parseInt(type) === 3) {
					axios({
						method: 'get',
						url: 'http://localhost:9000/book/search/' + this.searchContent + '/' + page,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.type_name = this.searchContent
						this.books = resp.data.data.records
						this.total = resp.data.data.total
					})
				} else if (parseInt(type) === 4) {
					axios({
						method: 'get',
						url: 'http://localhost:9000/book/find_bookname_lower/' + this.searchContent + '/' +
							page,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.books = resp.data.data.records
						this.total = resp.data.data.total
					})
				}
			},
			saveCart(bookId) {
				axios({
					method: 'post',
					url: "http://localhost:9000/shopping_cart/save/" + bookId,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: '加入购物车失败',
							type: 'error'
						});
						return
					}
					this.$message({
						message: '加入购物车成功',
						type: 'success'
					});
				}).catch(e => {
					this.$message({
						message: '加入购物车失败',
						type: 'error'
					});
				})
			},
			isLogin() {
				let token = localStorage.getItem('token')
				if (token === null || token === undefined) {
					this.is_login = false
					return
				}
				axios({
					url: 'http://localhost:9000/user/is_login',
					headers: {
						token: token
					}
				}).then(resp => {
					if (resp.data.success) {
						this.is_login = true
						return
					}
					this.is_login = false
				}).catch(e => {
					this.is_login = false
				})
			}

		},
		created() {
			let type = sessionStorage.getItem('type')
			if (type - 0 === 1) {
				this.type_name = sessionStorage.getItem('type_name')
				this.loadBooksByFreshData(1)
				this.flag = false
			} else if (type - 0 === 2) {
				let id = sessionStorage.getItem('category_id')
				this.type_name = sessionStorage.getItem('type_name')
				this.loadBooksByCategoryData(1, id)
				this.flag = false
			} else if (type - 0 === 3) {
				this.search_book_name = sessionStorage.getItem('type_name')
				this.type_name = sessionStorage.getItem('type_name')
				this.searchBookByName(1)
				this.flag = false
			} else if (parseInt(type) === 4) {
				this.type_name = sessionStorage.getItem('type_name')
				this.flag = true
				this.loadBooksByLowerData(1)
			}
			// 
			this.isLogin()
		}
	})
</script>